////
/// Components
/// Heading props
////

@mixin Heading {
  letter-spacing: get-type-scale(base, tracking);
  line-height: get-type-scale(base, leading);
  color: currentColor;
}

@mixin Subheading {
  font-size: get-type-scale(subheading);
  font-weight: get-type-scale(subheading, weight);
  letter-spacing: get-type-scale(base, tracking);
  line-height: get-type-scale(base, leading);
  color: get-color(coal, light);

  @media screen and (min-width: get-breakpoint(tablet)) {
    font-size: get-type-scale(subheading, tablet);
  }
}

///
/// Heading sizes
@mixin HeadingSizeJumbo {
  font-size: get-type-scale(jumbo);
  font-weight: get-type-scale(jumbo, weight);
  line-height: get-type-scale(jumbo, leading);

  @media screen and (min-width: get-breakpoint(tablet)) {
    font-size: get-type-scale(jumbo, tablet);
  }

  @media screen and (min-width: get-breakpoint(desktop)) {
    font-size: get-type-scale(jumbo, desktop);
  }
}

@mixin HeadingSize1 {
  margin-bottom: get-spacing(tight);
  font-size: get-type-scale(h1);
  font-weight: get-type-scale(h1, weight);

  @media screen and (min-width: get-breakpoint(tablet)) {
    margin-bottom: get-spacing();
    font-size: get-type-scale(h1, tablet);
  }

  @media screen and (min-width: get-breakpoint(desktop)) {
    font-size: get-type-scale(h1, desktop);
  }
}

@mixin HeadingSize2 {
  font-size: get-type-scale(h2);
  font-weight: get-type-scale(h2, weight);

  @media screen and (min-width: get-breakpoint(tablet)) {
    font-size: get-type-scale(h2, tablet);
  }

  @media screen and (min-width: get-breakpoint(desktop)) {
    font-size: get-type-scale(h2, desktop);
  }
}

@mixin HeadingSize3 {
  font-size: get-type-scale(h3);
  font-weight: get-type-scale(h3, weight);

  @media screen and (min-width: get-breakpoint(tablet)) {
    font-size: get-type-scale(h3, tablet);
  }

  @media screen and (min-width: get-breakpoint(desktop)) {
    font-size: get-type-scale(h3, desktop);
  }
}

@mixin HeadingSize4 {
  font-size: get-type-scale(h4);
  font-weight: get-type-scale(h4, weight);

  @media screen and (min-width: get-breakpoint(tablet)) {
    font-size: get-type-scale(h4, tablet);
  }

  @media screen and (min-width: get-breakpoint(desktop)) {
    font-size: get-type-scale(h4, desktop);
  }
}
